<template>
	<view class="ava-datail">
		<view class="title-avatar">
			<image v-if="flag == 1" class="img" :src="pic" mode="aspectFill"></image>
			<image v-else :src="getImg(pic)" mode="aspectFill"></image>
		</view>

		<view class="progress">
			<progress duration='20' activeColor="pink" :percent="progress" stroke-width="35" border-radius="20" />
			<text class="txt" style="margin-top: 150rpx;">正在生成请稍等...</text>
		</view>
	</view>
</template>

<script setup>
	import {
		getHairStyleApi,
		getAiChangeFile
	} from '@/api/hirstyStyle.js'
	import getImgUrl from '@/config/img.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'

	const pic = ref("") //无拼接照片地址
	const url = ref("") //有拼接
	const flag = ref('')
	const progress = ref(0) //进度条

	// 获取图片地址
	const getImg = (url) => {
		return getImgUrl(url)
	}
	// 进度条
	onShow(() => {
		const timer = setInterval(() => {
			progress.value += 5;
			if (progress.value >= 100) {
				uni.navigateBack()
				clearInterval(timer)
			}
		}, 5000)

	})
	//接收上一页传过来的图片
	onLoad((option) => {
		console.log('生成页', option)
		pic.value = option.pic
		flag.value = option.flag
	})
</script>

<style scoped lang="scss">
	.ava-datail {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title-avatar {
			width: 600rpx;
			height: 800rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.progress {
			position: relative;
			width: 600rpx;
			height: 500rpx;
			margin-top: 60rpx;

			.txt {
				position: absolute;
				top: -140rpx;
				left: 200rpx;
			}
		}
	}
</style>